<template>
  <!--个人设置-->
  <el-drawer
    v-model="showFlag"
    title="I am the title"
    size="400px"
    :with-header="false"
  >
    <div class="setting-box">
      <div class="setting-box-head" style="position: relative;">
        <el-avatar
          style="
            margin-right: 15px;
            margin-left: 0px;
            cursor: pointer;
            position: absolute;
            bottom: -35px;
            left: 40%;
          "
          :size="70"
          :src="avatar"
        />
      </div>
      <div class="setting-box-body"></div>
      <div class="setting-box-footer">
        <el-button style="width: 80%" @click="handleLogout" type="primary"
          >退出登录</el-button
        >
      </div>
    </div>
  </el-drawer>
</template>
    
<script lang="ts">
import { defineComponent, reactive, toRefs } from "vue";
import { getNoteList, addNote, deleteNote, writeNote } from "@/api/home";
import { login } from "@/api/user";
import dayjs from "dayjs";
import { ElMessage } from "element-plus";
import { addMenu } from "@/api/menu";

export default defineComponent({
  props: {
    avatar: {
      type: String,
      default: () => "",
    },
  },
  setup(props, { emit }) {
    const state = reactive({
      showFlag: false,
      loading: false,
      formData: {
        configName: "",
        noteIdList: [],
      },
    });

    const open = () => {
      state.showFlag = true;
    };

    const handleLogout = () => {
      emit("logout", {});
    };

    return {
      ...toRefs(state),
      open,
      handleLogout,
    };
  },
});
</script>
<style>
.el-drawer__body {
  padding: 0px 0px !important;
}
</style>
<style lang="less" scoped>
.setting-box {
  height: 100%;
  display: flex;
  flex-direction: column;

  &-head {
    height: 150px;
    line-height: 150px;
    background: -webkit-linear-gradient(right, #824c96, #4284db);
    width: 100%;
  }

  &-body {
    flex: 1;
  }

  &-footer {
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
}
</style>
    